<template>    
    <div class="large-page">
        <div id="map"></div>
        <div id="notification"></div>
        <div class="control-panel">
            <button id="draw-btn">绘制多边形</button>
            <div id="output">GeoJSON数据将显示在这里</div>
        </div>
    </div>
</template>

<script>
export default {
    name:'MyGISMap',
    components: {
    },
    props: {    
    },
    data () {
        return {         
          btn:true,  //默认true为显示
        }
    },
    methods:{  

      mapOnLoad(){

             // init tianditu maps
            var vec = L.KqGIS.tiandituTileLayer({layerType: "vec"});
            var img = L.KqGIS.tiandituTileLayer({layerType: "img"});
            var ter = L.KqGIS.tiandituTileLayer({layerType: "ter"});
            var cva = L.KqGIS.tiandituTileLayer({layerType: "cva"});
            var eia = L.KqGIS.tiandituTileLayer({layerType: "eia"});

            var baseMaps = {
              "矢量图层": vec,
              "影像图层": img,
              "地形晕染图层": ter
            };

            var overlays = {
              "中文注记图层": cva,
              "英文注记图层": eia
            };
           
            var map = L.map('map', {                
                zoomControl: true,
                center: [34, 114],
                zoom: 7,
                attributionControl: false,
                layers: [vec, cva]
            });

            //添加常用底图图层切换按钮
            L.control.layers(baseMaps, overlays).addTo(map).setPosition("topleft");

            //L.KqGIS.tiandituTileLayer({ layerType: 'vec' }).addTo(map);
            //L.KqGIS.tiandituTileLayer({ layerType: 'cva' }).addTo(map);           

            //let CXLRFDB2007 = "http://gis24.jlu3s.com:8699/kqgis/rest/services/HeNan.2007CXLRFDB/map";
            //L.KqGIS.tileMapLayer(CXLRFDB2007, {}).addTo(map);

            // 添加鹰眼控件
            var img = L.KqGIS.tiandituTileLayer({ layerType: "img", attribution: null });
            new L.Control.MiniMap(img).addTo(map); 
            
            // 全局变量存储多边形数据
            let mypolygon = null;
            let drawControl = null;

            // 绘制按钮事件
            document.getElementById('draw-btn').addEventListener('click', function() {
                if (drawControl) {
                    map.removeControl(drawControl);
                    this.textContent = '绘制多边形';
                    drawControl = null;
                    return;
                }

                // 初始化绘制工具
                this.textContent = '取消绘制';
                drawControl = new L.Control.Draw({
                    draw: {
                        polygon: {
                            allowIntersection: false,
                            showArea: true,
                            shapeOptions: {
                                color: '#3388ff'
                            }
                        },
                        polyline: false,
                        rectangle: false,
                        circle: false,
                        marker: false,
                        circlemarker: false
                    },
                    edit: false
                });
                map.addControl(drawControl);

                // 绘制完成事件
                map.on(L.Draw.Event.CREATED, function(e) {
                    const layer = e.layer;
                    map.addLayer(layer);
                    
                    // 获取GeoJSON数据
                    //mypolygon = layer.toGeoJSON();
                    mypolygon = layer.toGeoJSON().geometry;
                    document.getElementById('output').textContent = JSON.stringify(mypolygon, null, 2);
                    
                    // 移除绘制控制
                    map.removeControl(drawControl);
                    document.getElementById('draw-btn').textContent = '绘制多边形';
                    drawControl = null;
                    
                    console.log('多边形数据已保存到mypolygon变量:', mypolygon);



                    let onsuccess = function (response) {
                      //$('#output').val(formatJson(response.result));
                      L.geoJSON(response.result.result.features).addTo(map);
                      //notification.show({ message: '请求成功' }, 'info');
                    };

                    let onfailed = function () {
                      //notification.show({ message: '请求失败' }, 'info');
                    };



                    let serviceUrl = 'http://support.kqgeo.com:18699/kqgis/rest/services/jingjin3857/data';
                    let polygon = L.geoJSON(
                      mypolygon,
                      { style: { color: 'red', fillOpacity: 0.1 } }
                    );
                    console.log(polygon,666)
                    let geoSRS = new KqGIS.ServiceSRS({
                      type: KqGIS.ProjectSystemType.EPSG,
                      value: '4326'
                    });
                    let filter = new KqGIS.FilterParams({
                      geometry: L.Util.toKqGISGeometry(polygon),
                      geoSRS: geoSRS,
                      SpatialRel: KqGIS.SpatialRel.INTERSECT
                    });

                    let params = new KqGIS.Data.GetFeaturesByGeometryParams({
                      layerId: 2,
                      filter: filter,
                      returnContent: true,
                      hasGeometry: true
                    });
                    L.KqGIS.dataFeatureService(serviceUrl).getFeaturesByGeometry(params, onsuccess, onfailed);

                    



                });//end_of_map.on()
            });//end_of_绘制



            





      } //end_of_mapOnLoad()

    },
    created(){     
    },
    mounted(){      
      this.mapOnLoad();
    },
    watch:{},
    computed:{    
    }        
}      

</script>

<style scoped>
.large-page {
    width: 100%;
    height: 100%;
    background-color: antiquewhite;
    display: flex;
    justify-content: center;
    align-items: center;
 }
 #map {
    /* position: inherit; */
    /* width: calc( 100vw - 120px );
    height: calc( 100vh - 50px ); */
    width: 100%;
    height: 100%;
    background-color: rgb(40, 230, 230);
 }

 /* 绘图控件 */
 .control-panel {
    position: absolute;
    /* top: 10px; */
    top: 75px;
    /* right: 10px; */
    right: 20px;
    z-index: 1000;
    background: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
button {
    padding: 8px 15px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
button:hover { background: #45a049; }
#output { 
    margin-top: 10px;
    padding: 10px;
    background: #f5f5f5;
    border-radius: 4px;
    font-family: monospace;
    max-width: 300px;
    word-break: break-all;
}
</style>
